<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta name="layout" content="mobile"/>
    <script type="text/javascript">
        $(document).ready(function() {
            navigator.geolocation.getCurrentPosition(onOk, errorCallback);

            $("#infoButton").click(function() {
               $("#main").toggle()
               $("#about").toggle()
            });
            $("#closeAbout").click(function() {
               $("#main").toggle()
               $("#about").toggle()
            });
        });

        function onOk(position) {
            $("#latitud").val(position.coords.latitude);
            $("#longitud").val(position.coords.longitude);
            $("#searchForm").submit()
        }

        function errorCallback(error) {
        }

    </script>
    <style type="text/css" media="screen">
    #about {
        display: none;
        padding: 20px 10px 40px;
/*        text-shadow: rgba(255, 255, 255, 0.3) 0px -1px 0;
        font-size: 13px;
        text-align: center;
        background: #161618;
        */
    }

    #about p {
        margin-bottom: 8px;
    }

    #about a {
        color: #000;
        font-weight: bold;
        text-decoration: none;
    }
    .info2 {
        background: #DCE1EB;
        font-size: 14px;
        line-height: 18px; /*text-align: center;*/
        text-shadow: rgba(255, 255, 255, .8) 0 1px 0;
        color: #4C566C;
        padding: 15px;
        border-top: 1px solid rgba(76, 86, 108, .3); /*font-weight: bold;*/
    }
    </style>
    <script type="text/javascript">

        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-23201876-1']);
        _gaq.push(['_trackPageview']);

        (function() {
            var ga = document.createElement('script');
            ga.type = 'text/javascript';
            ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(ga, s);
        })();

    </script>
</head>
<body>
    <div class="toolbar">
        <h1>Buscar playas</h1>
        <a class="button slideup" id="infoButton">Info</a>
    </div>
    <div id="main" class="info2">
        Busca las playas más cercanas. Puedes indicar lo que necesitas como:<br/><br/>
        "con aseos y cruz roja"<br/>
        "playa nudista en benidorm"<br/>
        "que alquilen sombrillas y hamacas"<br/>
        "accesible para discapacitados y con duchas"<br/>

        <g:form name="searchForm" url="[controller:'coordenadas', action:'busqueda']" method="get">
            <g:hiddenField id="latitud" name="latitud"/>
            <g:hiddenField id="longitud" name="longitud"/>
            <ul class="edit rounded">
                <li><input type="text" name="playa" placeholder="Nombre playa y/o servicios" id="some_name"/></li>
            </ul>
            <div>
                <a style="width:50%;margin:auto" href="javascript:void($('#searchForm').submit())" class="whiteButton">Buscar</a>
            </div>
        </g:form>
        <br/>

    </div>
    <div id="about" class="info2">
        <p><strong>iPlayas</strong><br/>Version 1.0 beta<br/><br/>
        Desarrollado para el desafio Abredatos por:<br/>
        - Alberto Vilches <a href="http://albertovilches.com">blog</a>, <a href="http://twitter.com/albertovilches">@albertovilches</a><br/>
        - Adrián de la Horra<br/>
        - Marco Martinez <a href="http://twitter.com/marquetemb">@marquetemb</a><br/>
            <br/>
            2011 - <a href="http://www.opensource.org/licenses/apache2.0">Apache License</a> | <a href="http://code.google.com/p/playitas-abredatos/">Código fuente</a> |  <a href="http://www.abredatos.es/">Abredatos</a>

            <br/>
            <hr/>
        <br/>
        <p>Estos son todos los servicios por los que se puede buscar</p>
- buceo           <br/>
- aseos                   <br/>
- aparcamiento            <br/>
- zona de fondeo          <br/>
- alquiler de hamacas     <br/>
- alquiler de nauticos    <br/>
- alquiler de sombrillas  <br/>
- acceso minusvalidos     <br/>
- bandera azul            <br/>
- zona protegida          <br/>
- naturaleza              <br/>
- señalizacion de accesos <br/>
- oficina de turismo      <br/>
- papeleras               <br/>
- aseos                   <br/>
- duchas                  <br/>
- servicio de limpieza    <br/>
- nudista             <br/>
- policia             <br/>
- cruz roja           <br/>
- equipo salvamento   <br/>
- pasarelas de acceso <br/>


        %{--<p><em>Create powerful mobile apps with<br/> just HTML, CSS, and jQuery.</em></p>--}%
        %{--<p>--}%
            %{--<a href="http://twitter.com/jqtouch" target="_blank">@jQTouch on Twitter</a>--}%
        %{--</p>--}%
        <p><br/><br/><a href="#" id="closeAbout" class="grayButton goback">Volver</a></p>
    </div>

</body>
</html>